<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		canvas{border: 1px solid #333;}
	</style>
</head>
<body>
	<!-- canvas的宽度和高度，不能用css来调整，用属性来调整宽度和高度 -->
	<canvas width="600" height="400"></canvas>
	<script type="text/javascript">
		//拿到一张白纸
		let canvas=document.querySelector("canvas");
		
		//拿画笔
		let ctx= canvas.getContext("2d")
	

		// //抬笔，移动画笔
		ctx.moveTo(100,100)
		// //绘制路径
		ctx.lineTo(200,200)

		ctx.strokeStyle="red"
		ctx.lineWidth=3
		ctx.stroke()

		//绘制三角形
		ctx.moveTo(100,100)
		ctx.lineTo(100,200)
		ctx.lineTo(200,200)
		// ctx.lineTo(100,100)
		ctx.closePath()				//关闭路径

		// ctx.strokeStyle="green"
		// ctx.stroke()

		ctx.fillStyle="green"
		ctx.strokeStyle="red"
		ctx.fill()					//填充的时候，路径自动闭合
		ctx.stroke()


	</script>
</body>
</html>